<template>
  <el-dialog v-model="pram.show" :title="`${pram.data.name} - 甘特图`" style="height: 70vh;overflow-y: scroll;width: 60vw">
    <div class="dialog-main">
      <template v-if="isExist">
        <el-button class="opt-btn" type="primary" @click="openGanttEdit">配置甘特图</el-button>
<!--        <div class="gantt-chart" ref="chartRef"></div>-->
        <gantt_chart :tasks="ganttData" />
      </template>
      <el-empty v-else description="暂无数据，请先配置任务流程">
        <el-button type="primary" @click="openGanttEdit">配置甘特图</el-button>
      </el-empty>
    </div>
    <div v-if="editPram.show">
      <GanttEdit :pram="editPram" @submit="handleEmitFromEdit" />
    </div>
  </el-dialog>
</template>

<script setup>
import { defineProps, ref, computed, reactive, nextTick, onBeforeUnmount } from 'vue'
import * as echarts from 'echarts'
import GanttEdit from "@/views/product/GanttEdit.vue";
import Gantt_chart from "@/views/product/gantt_chart.vue";


const { pram } = defineProps({
  pram: {
    type: Object,
    default: () => ({ show: false, data: {} })
  }
})

const emits = defineEmits(['update'])

// let myChart = null
// const chartRef = ref(null)
const ganttData = ref([])
const editPram = reactive({ show: false, data: [], productId: '',productType:'' })

const isExist = computed(() => ganttData.value.length > 0)

function openGanttEdit() {
  editPram.show = true
  editPram.data = ganttData.value
  editPram.productId = pram.data.id
  editPram.productType = pram.data.type
}

function handleEmitFromEdit(data) {
  ganttData.value = data
  emits('update')
  // initChart()
}

// function initChart() {
//   nextTick(() => {
//     if (!chartRef.value) return
//     myChart && myChart.dispose()
//     myChart = echarts.init(chartRef.value)
//
//     let minTime = 0, maxTime = 0
//     const startArr = []
//     const rangeArr = []
//     const categories = []
//
//     ganttData.value.forEach(item => {
//       const start = new Date(item.time[0]).getTime()
//       const end = new Date(item.time[1]).getTime()
//       minTime = minTime ? Math.min(minTime, start) : start
//       maxTime = Math.max(maxTime, end)
//       startArr.push(start)
//       const a = end - start
//       rangeArr.push(Math.max(a, 64800000 ))
//       categories.push(item.name)
//     })
//
//     const relativeStartArr = startArr.map(t => t - minTime)
//     const todayTime = Date.now() // 当前时间点
//     const todayOffset = todayTime - minTime
//
//     const option = {
//       tooltip: {
//         trigger: 'axis',
//         axisPointer: {
//           type: 'shadow'
//         },
//         formatter(params) {
//           console.log(params)
//           const start = params[0].data + minTime
//           const end = params[1].data + start
//           const startTime = new Date(start).toLocaleDateString()
//           const endTime = new Date(end).toLocaleDateString()
//           return `
//             <div>任务名称: ${params[0].axisValueLabel}</div>
//             <div>开始时间: ${startTime}</div>
//             <div>结束时间: ${endTime}</div>
//             <div>持续时间: ${((end - start) / (1000 * 60 * 60 * 24)+1).toFixed(0)} 天</div>
//           `
//         }
//       },
//       grid: {
//         top: '30',
//         bottom: '10',
//         left: '5%',
//         right: '5%',
//         containLabel: true
//       },
//       xAxis: {
//         type: 'value',
//         min: 0,
//         max: maxTime - minTime,
//         axisLabel: {
//           formatter: value => echarts.format.formatTime('MM/dd', value + minTime)
//         }
//       },
//       yAxis: {
//         name: '任务名称',
//         nameLocation: 'start',
//         nameTextStyle: {
//           fontSize: 14
//         },
//         type: 'category',
//         inverse: true,
//         data: categories
//       },
//       series: [
//         {
//           name: '占位',
//           type: 'bar',
//           stack: 'Total',
//           silent: true,
//           itemStyle: {
//             borderColor: 'transparent',
//             color: 'transparent'
//           },
//           emphasis: {
//             itemStyle: {
//               borderColor: 'transparent',
//               color: 'transparent'
//             }
//           },
//           data: relativeStartArr
//         },
//         {
//           type: 'bar',
//           stack: 'Total',
//           label: {
//             show: true,
//             formatter: params => (params.data / (1000 * 60 * 60 * 24)+1).toFixed(0)
//           },
//           itemStyle: {
//             color: '#67C23A'
//           },
//           data: rangeArr,
//           markLine: {
//             symbol: ['none', 'none'],
//             lineStyle: {
//               color: '#F56C6C',
//               type: 'dashed',
//               width: 2
//             },
//             label: {
//               show: true,
//               formatter: '今天',
//               position: 'insideEndTop',
//               fontWeight: 'bold',
//               color: '#F56C6C'
//             },
//             data: [
//               {
//                 xAxis: todayOffset
//               }
//             ]
//           }
//         }
//       ]
//     }
//
//     myChart.setOption(option)
//   })
// }

function init() {
  if (pram.data.ganttConfig) {
    ganttData.value = pram.data.ganttConfig
  }
  // if (isExist.value) initChart()
}

init()

// onBeforeUnmount(() => {
//   if (myChart) {
//     myChart.dispose()
//     myChart = null
//   }
// })


</script>

<style scoped lang="scss">
.dialog-main {
  height: 100%;
  position: relative;
  overflow: hidden;

  .opt-btn {
    position: absolute;
    top: 0;
    right: 20px;
  }


  .el-empty {
    margin-top: 60px;
  }
}
</style>
